<template>
  <div class="reading">
    <div class="container" @touchmove="nextSection">
      <!-- 章节列表弹出 -->
      <van-popup
        v-model="topPopup"
        position="left"
        :style="{ height: '100%', width: '80%' }"
        :overlay="false"
        class="section_list_bg"
      >
        <div class="section_list">
          <!-- 顶部控件 -->
          <div class="back">
            <span @click="showPopupFun"
              ><i class="iconfont icon-zuojiantou"></i
            ></span>
            <span>{{ bookTitle }}</span>
            <span style="opacity: 0"><i class="iconfont icon-shunxu"></i></span>
          </div>
          <div class="lists">
            <div
              :class="['s_item', { is_reading: sectionIndex == index }]"
              v-for="(item, index) in sectionLists"
              :key="item.secId"
              @click="changeSection(item.secId)"
            >
              <p>
                {{ item.title
                }}<span class="lock_sec" v-show="index >= 19"
                  ><i class="iconfont icon-jiesuo"></i
                ></span>
              </p>
            </div>
          </div>
        </div>
      </van-popup>

      <!-- 顶部弹出 -->
      <van-popup
        v-model="showPopup"
        position="top"
        :overlay="false"
        :style="{ height: '50px' }"
        v-show="!topPopup"
      >
        <div class="v_popup v_popup_t">
          <div class="top_back">
            <span class="back" @click="$router.back()"
              ><i class="iconfont icon-zuojiantou"></i
            ></span>
            <span class="share" @click="showShare = true"
              ><i class="iconfont icon-fenxiang_2"></i
            ></span>
          </div>
        </div>
      </van-popup>
      <!-- 底部一次弹出层 -->
      <van-popup
        v-model="showPopup"
        position="bottom"
        :overlay="false"
        :style="{ height: '110px' }"
        v-show="!topPopup"
      >
        <div class="v_popup v_popup_b">
          <!-- 切换章节 -->
          <div class="cut_section">
            <span class="btn" @click="prevSec">上一章</span>
            <van-slider v-model="sectionNum" @change="changeTips" active-color="#52b594" />
            <span class="btn" @click="nextSec">下一章</span>
          </div>
          <!-- 底部控件 -->
          <div class="b_btns">
            <div class="content">
              <!-- 内容 -->
              <div class="item_btn" @click="showTopPopup">
                <div class="icon">
                  <i class="iconfont icon-mulu"></i>
                </div>
                <div class="text">目录</div>
              </div>

              <div
                :class="['item_btn', { rotate: rotate }]"
                @click="restorationFun"
              >
                <div class="icon">
                  <i class="iconfont icon-reset"></i>
                </div>
                <div class="text">重置</div>
              </div>

              <div class="item_btn" @click="tips">
                <div class="icon">
                  <i class="iconfont icon-huancun"></i>
                </div>
                <div class="text">缓存</div>
              </div>

              <div class="item_btn" @click="showCtrlbtn = true">
                <div class="icon">
                  <i class="iconfont icon-shezhi"></i>
                </div>
                <div class="text">设置</div>
              </div>
            </div>
          </div>
        </div>
      </van-popup>

      <!-- 底部二次弹出 -->
      <van-popup
        v-model="showCtrlbtn"
        position="bottom"
        :overlay="false"
        :style="{ height: '120px' }"
      >
        <div class="v_popup v_sec_popup_b">
          <div class="change_style">
            <!-- 更改字号 行高等 -->
            <div class="change_font">
              <!-- 更改字体大小 -->
              <div class="change_size">
                <!-- 字体增大和缩小 -->
                <span class="reduce" @click="reduceSize"
                  ><i class="iconfont icon-yueduye_zitijianxiao"></i
                ></span>
                <span>{{ fontSize }}</span>
                <span class="add" @click="addSize"
                  ><i class="iconfont icon-zitijiada01"></i
                ></span>
              </div>
              <!-- 更改行高 -->
              <div class="change_line-height">
                <span class="reduce" @click="reduceLineHeight"
                  ><i class="iconfont icon-xiajiantou"></i
                ></span>
                <span>{{ lineHeightShow }}</span>
                <span class="add" @click="addLineHeight"
                  ><i class="iconfont icon-shangjiantou"></i
                ></span>
              </div>
            </div>
            <!-- 点击更改色块选中，并且更换背景颜色 -->
            <div class="change_bg">
              <!-- 色块 -->
              <div class="content">
                <div
                  class="bg_item"
                  v-for="(item, index) in colorArr"
                  :key="index"
                  :style="`
                  background-color:${item.bg};
                  border:${item.br};
                  `"
                  @click="changeStyle(item)"
                >
                  <span v-show="item.using"
                    ><i class="iconfont icon-gougou"></i
                  ></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-popup>

      <!-- 分享 -->
      <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
        @select="onSelect"
        style="background-color: #fff; color: #444444"
      />

      <!-- 小说内容区域 -->
      <div
        class="myreading_view"
        :style="`
      background-color:${bgColor};
      line-height:${lineHeight}px;
      font-size:${fontSize}px;
      color:${color};
      `"
        ref="section_container"
        @click="showPopupFun"
      >
        <!-- 加载中 -->
        <van-loading class="section_loading" size="24px" v-show="loading"
          >加载中...</van-loading
        >
        <!-- 章节内容 -->
        <div
          class="section_content"
          v-html="sectionHtml"
          v-show="!loading"
          ref="section_height"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { getBookSectionList, getBookSectionContent } from "../../api/base";
export default {
  data() {
    return {
      bookTitle: "", //书名
      sectionNum: 0,
      lineHeight: 25, //跟随字体变化的行高,
      lineHeightShow: 5, //显示在界面的行高
      fontSize: 16, //控制字体大小,
      bgColor: "#f2e9e0", //控制背景颜色,
      color: "#000",
      showPopup: false, //控制弹出层，
      showCtrlbtn: false, //控制底部二次弹出层
      topPopup: false, //控制侧面弹出
      rotate: false, //控制类名是否启用
      readingId: "bd_cf0f8610e1b44acb96a209ea07b8af85_4", //当前阅读的书本id
      sectionId: "", //当前章节id
      sectionLists: [], //当前章节列表
      sectionIndex: 0, //章节下标默认为0
      sectionHtml: [], // 章节内容
      loading: true,
      loadingNext: true, //定义加载下一章的遍历
      showShare: false, //分享界面

      //   控制切换的颜色
      colorArr: [
        { bg: "#f2e9e0", cl: "#000", br: "2px solid #ef0819", using: true },
        { bg: "#f6efd2", cl: "#000", br: "none", using: false },
        { bg: "#c9d5e3", cl: "#000", br: "none", using: false },
        { bg: "#edded7", cl: "#000", br: "none", using: false },
        { bg: "#d0dcc6", cl: "#000", br: "none", using: false },
        { bg: "#343434", cl: "#fff", br: "none", using: false },
        { bg: "#1d1d1d", cl: "#fff", br: "none", using: false },
        { bg: "#dfdfdf", cl: "#000", br: "none", using: false },
      ],
      // 分享的图标
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
    };
  },
  methods: {
    // 展示弹出层
    showPopupFun() {
      // 取反底部一次弹出
      this.showPopup = !this.showPopup;
      // 关闭底部二次弹出
      this.showCtrlbtn = false;
      // 关闭侧面弹出
      this.topPopup = false;
    },
    // 修改样式
    changeStyle(item) {
      // 更改小色块选中状态
      this.colorArr.forEach((ele) => {
        ele.br = "none";
        ele.using = false;
      });
      item.br = "2px solid #ef0819";
      item.using = true;
      // 更改阅读界面背景与字体颜色
      this.bgColor = item.bg;
      this.color = item.cl;
    },
    // 增加字体大小
    addSize() {
      //   修改字号
      this.fontSize += 1;
      //   修改行高
      this.lineHeight += 1;
    },
    // 减小字体大小
    reduceSize() {
      //   修改字号
      this.fontSize -= 1;
      //   修改行高
      this.lineHeight -= 1;
    },
    // 增加行高
    addLineHeight() {
      this.lineHeight += 1;
      this.lineHeightShow += 1;
    },
    // 减小行高
    reduceLineHeight() {
      this.lineHeight -= 1;
      this.lineHeightShow -= 1;
    },
    // 重置字体
    restorationFun() {
      this.rotate = true;
      this.lineHeight = 25; //跟随字体变化的行高,
      this.lineHeightShow = 5; //显示在界面的行高
      this.fontSize = 16; //控制字体大小,
      setTimeout(() => {
        this.rotate = false;
        Toast("重置样式成功");
      }, 500);
    },
    // 侧面弹出
    showTopPopup() {
      // 关闭其余弹出层
      this.showCtrlbtn = false;
      // 单独开启侧面弹出
      this.topPopup = true;
    },
    // 上一章
    prevSec() {
      this.sectionIndex -= 1;
      this.sectionNum = this.sectionIndex;
    },
    // 下一章
    nextSec() {
      this.sectionIndex += 1;
      this.sectionNum = this.sectionIndex;
    },
    // 提示
    tips() {
      Toast("没有硬件支持");
    },
    // 切换章节
    changeSection(id) {
      console.log(id);
      let index = this.sectionLists.findIndex((item) => item.secId == id);
      if (index >= 19) {
        Toast("该章节是vip章节，请您充值");
      } else {
        this.sectionIndex = index;
        this.sectionNum = this.sectionIndex;
      }
    },
    changeTips(){
      Toast('充钱再拉进度条');
      this.sectionNum = this.sectionIndex;
    },
    // 下拉触底下一章
    nextSection() {
      // 滚动高度
      let top = Math.ceil(this.$refs.section_container.scrollTop + 668);
      // 盒子容器的高度
      let conHeight = this.$refs.section_height.offsetHeight;
      // 加载下一章
      if (this.loadingNext) {
        if (top > conHeight) {
          this.loadingNext = false;
          // 下一章
          this.nextSec();
        }
      }
    },
    // 获取章节列表
    getBookSectionListFun() {
      this.readingId = this.$route.query.id;
      getBookSectionList({
        source_uuid: this.readingId,
      }).then((res) => {
        console.log(res);
        this.sectionLists = res.data.catalog;
        this.sectionLists = this.sectionLists.filter((item) => item.leaf);
        this.bookTitle = res.data.book.title;
        // 获取到列表的时候获取内容
        this.getBookSectionContentFun();
      });
    },
    // 通过章节id获取章节内容
    getBookSectionContentFun() {
      this.loading = true;
      // 获取当前章节
      getBookSectionContent({
        source_uuid: this.readingId,
        content_uuid: this.sectionLists[this.sectionIndex].secId,
      }).then((data) => {
        this.sectionHtml = data.data.content;
        this.loadingNext = true;
        this.loading = false;
      });
    },
    // 点击分享时出现
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
  },
  watch: {
    // 监听行高
    lineHeight() {
      if (this.lineHeightShow > 15) {
        this.lineHeightShow = 15;
        this.lineHeight = 35;
        Toast("再加会影响阅读哦");
        return;
      } else if (this.lineHeightShow < 1) {
        this.lineHeightShow = 1;
        this.lineHeight = 21;
        Toast("我已经减到极限了");
      }
    },
    // 字体大小
    fontSize() {
      if (this.fontSize > 30) {
        this.lineHeight = 39;
        this.fontSize = 30;
        Toast("去买副老花镜吧");
      } else if (this.fontSize < 12) {
        this.lineHeight = 21;
        this.fontSize = 12;
        Toast("哇!火眼金睛!");
      }
    },
    sectionIndex() {
      if (this.sectionIndex >= 19) {
        this.sectionIndex = 18;
        Toast("该章节为vip章节，请您充值");
      } else if (this.sectionIndex < 0) {
        Toast("不能向前了");
      } else {
        this.getBookSectionContentFun();
      }
    },
  },
  created() {
    // 获取章节列表
    this.getBookSectionListFun();
    console.log("传过来的书籍id====》", this.$route.query);
  },
  beforeDestroy() {
   
    
  },
};
</script>

<style lang="less">
.reading {
  width: 100%;
  height: 100%;
  .container {
    width: 100%;
    height: 100%;
    overflow: auto;
    // 章节列表

    .myreading_view {
      width: 100%;
      height: 100%;
      overflow: auto;
      .section_loading {
        position: fixed;
        top: 45%;
        left: 50%;
        transform: translateX(-50%);
      }
      .section_content {
        transition: all 0.5s;
        padding: 8px 14px;
        h1 {
          margin: 10px 0;
          text-indent: 1em;
        }
        p {
          text-indent: 2em;
        }
      }
    }
    // 控制弹出层公共样式
    .van-popup {
      background-color: #010101;
      color: #fafafa;
    }
    //   顶部弹出
    .v_popup_t {
      display: flex;
      align-items: center;
      padding: 0 14px;
      width: calc(100% - 28px);
      height: 100%;
      .top_back {
        flex: 1;
        display: flex;
        justify-content: space-between;
        span {
          i {
            font-size: 18px;
          }
        }
      }
    }
    //   底部一次弹出
    .v_popup_b {
      padding: 0 14px;
      width: calc(100% - 28px);
      height: 100%;
      // 切换章节
      .cut_section {
        display: flex;
        height: 40px;
        align-items: center;
        border-bottom: 1px solid #a1a1a1;
        .btn {
          font-size: 13px;
          color: #cec9cb;
        }
        .van-slider {
          flex: 1;
          margin: 0 10px;
          .van-slider__button {
            width: 8px;
            height: 8px;
          }
        }
      }
      // 底部按钮
      .b_btns {
        display: flex;
        align-items: center;
        height: 59px;
        .content {
          display: flex;
          flex: 1;
          padding: 0 6px;
          justify-content: space-between;
          height: 100%;
          .item_btn {
            text-align: center;
            line-height: 30px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding-top: 10px;

            .icon {
              margin-bottom: -10px;
              i{
                font-size: 18px;
              }
            }
            &.rotate {
              .icon {
                transition: all 0.5s;
                transform: rotate(360deg);
              }
            }
            .text {
              font-size: 12px;
              color: #d7d7d7;
              transform: scale(0.83333);
            }
          }
        }
      }
    }
    //   底部二次弹出
    .v_sec_popup_b {
      background-color: #010101;
      padding: 0 14px;
      width: calc(100% - 28px);
      height: 100%;
      // 更改字号
      .change_style {
        .change_font {
          height: 59px;
          border-bottom: 1px solid #a1a1a1;
          display: flex;
          align-items: center;
          div {
            height: 38px;
            border: 1px solid #a1a1a1;
            border-radius: 4px;
            display: flex;
            flex: 1;
            span {
              display: block;
              height: 100%;
              flex: 1;
              border-right: 1px solid #a1a1a1;
              line-height: 40px;
              text-align: center;
              &.add {
                border: none;
              }
              &.reduce,
              &.add {
                i {
                  font-size: 20px;
                }
              }
            }
          }
          .change_size {
            margin-right: 30px;
          }
        }
      }
      //更改颜色
      .change_bg {
        height: 60px;
        display: flex;
        align-items: center;
        .content {
          height: 36px;
          flex: 1;
          display: flex;
          justify-content: space-between;
          .bg_item {
            position: relative;
            width: 36px;
            height: 36px;
            border-radius: 4px;
            box-sizing: border-box;
            span {
              position: relative;
              top: -2px;
              left: -1px;
              i {
                font-size: 34px;
                color: #ef0819;
              }
            }
          }
        }
      }
    }
    // 章节列表
    .van-popup.section_list_bg {
      background-color: #fefefe;
      .section_list {
        padding: 0px 20px;
        color: #3d4244;
        position: relative;
        width: calc(100% - 40px);
        height: 100%;
        overflow: auto;
        .back {
          position: fixed;
          top: 0;
          left: 20px;
          height: 50px;
          width: calc(100% - 40px);
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 15px;
          background-color: #fefefe;
          z-index: 10;
          span {
            color: #3d4244;
          }
        }
        .lists {
          padding-top: 50px;
        }
        .s_item {
          height: 40px;
          display: flex;
          align-items: center;
          position: relative;
          overflow: hidden;
          p {
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            .lock_sec {
              position: absolute;
              margin: auto;
              top: 0;
              bottom: 0;
              right: 0;
            }
          }
        }
        .is_reading {
          color: #ef0819;
        }
      }
    }
  }
}
</style>